<template>
  <div class='main-tags' v-if="showTag">
    <i v-if="tagIcon" class="el-icon-arrow-left" style="float:left;padding-top:7px;cursor: pointer;"
      @click="leftMove"></i>
    <ul class="tag-list">
      <li ref="tagItem" class="tag-item" v-for="(item, index ) in tagList" :class="{ 'active': isActive(item.path) }"
        :key="index">

        <router-link :to="item.path" class="tag-item-title">{{ item.title }}</router-link>

        <i class="el-icon-close" @click="closeTag(index)"></i>
      </li>
    </ul>
    <i v-if="tagIcon" class="el-icon-arrow-right" style="float:left;padding-top:7px;cursor: pointer;"
      @click="rightMove"></i>
    <el-dropdown @command="handleTag">
      <el-button size="mini" type="primary">
        标签选项<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
        <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import Bus from '../common/bus';
export default {
  name: "Tags",
  data () {
    return {
      tagIcon: true,
      tagList: [],
      collapse: false,
      initTag: {
        title: "系统首页",
        path: '/index',
        name: 'Home'
      }
    }
  },
  methods: {
    leftMove () {
      var tag = document.querySelector('.tag-list')
      tag.scrollLeft = tag.scrollLeft - 150
    },
    rightMove () {
      var tag = document.querySelector('.tag-list')
      tag.scrollLeft = tag.scrollLeft + 150
    },
    isActive (path) {
      return path === this.$route.fullPath;
    },
    
    // 关闭单个标签
    closeTag (index) {

      let delItem = this.tagList.splice(index, 1)[0];
      // 删除标签后 当前选中的标签  后一个标签 前一个标签
      let curItem = this.tagList[index] ? this.tagList[index] : this.tagList[index - 1];

      if (curItem) {

        delItem.path === this.$route.fullPath && this.$router.push(curItem.path);
      } else {

        // 没有前一个标签和后一个标签 关闭该标签就类似于 关闭所有
        this.closeAll();
      }
    },
    // 关闭全部标签
    closeAll () {

      this.tagList = [this.initTag];
      this.$router.push('/index');
    },
    // 关闭其他标签
    closeOther () {

      let curItem = this.tagList.filter(item => item.path === this.$route.fullPath);
      this.tagList = curItem;
    },
    // 设置标签
    setTag (route) {

      let isExist = this.tagList.some(item => item.path === this.$route.fullPath);
      
      !isExist && this.tagList.push({
        title: route.meta.title,
        path: route.fullPath,
        name: route.matched[1].components.default.name
      });
      Bus.$emit('tags', this.tagList);
    },
    handleTag (command) {

      'closeOther' === command ? this.closeOther() : this.closeAll();
    }
  },
  computed: {
    showTag () {

      return this.tagList.length > 0;
    }
  },
  watch: {
    $route (newValue) {

      this.setTag(newValue);
    }
  },
  created () {

    this.setTag(this.$route);
  }
}
</script>

<style scoped lang="less">
.main-tags {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 42px;
  padding: 8px 5px;
  background-color: #f5f5f5;
  box-shadow: 1px 0 2px #ccc;
}

.tag-list {
  width: 90%;
  float: left;
  font-size: 14px !important;
  display: flex;
  padding-bottom: 8px;
  overflow-x: auto;
}

.tag-item {
  padding: 4px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;

  &+& {
    margin-left: 10px;
  }

  // overflow: hidden;
  display: flex;

  &.active {
    border-radius: 3px;
    border-color: #333;
    background-color: #333;
    color: white !important;
  }

  &:hover {
    border-radius: 3px;
    background-color: #444;
    color: white;

    .tag-item-title {
      color: white;
    }
  }

  .el-icon-close {
    position: relative;
    right: -5px;
    margin-left: 3px;
    margin-top: 4px;
    cursor: pointer;
  }
}

.tag-item-title {
  color: #666;
  display: block;
  text-overflow: clip;
  white-space: nowrap;
  // overflow: hidden;
  flex: 1;

  &.router-link-active {
    color: white;
  }
}

.el-dropdown {
  position: absolute;
  right: 5px;
}
</style>
